<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<style>
			/* 全局使用 */
			:root {
				--colorA: #fff;
				--colorB: #000;
				--fontColor: color;
				--borderRadius: var(--baseSize);
				--baseSize: 20px;
			}

			div {
				width: 200px;
				height: 200px;
				background: linear-gradient(45deg, var(--colorA, red), var(--colorB));
				transition: 1s background;
				/* 没效果 */
			}

			div {
				--fontSize: 30px;

				/* 只能在div内部及子元素使用 */
				font-size: var(--fontSize);

				/* 第二参数为默认值 */
				font-style: var(--fontStyle, italic);

				/* 变量可以行内声明 */
				color: var(--fontColor);

				/* 变量可以嵌套 */
				border-radius: var(--borderRadius);
			}

			div:hover {
				--colorA: yellowgreen;
				--colorB: deeppink;
			}
		</style>

		<script>
			function myClick() {
				console.log(document.getElementsByClassName('box')[0].style);
				document.getElementsByClassName('box')[0].style.setProperty('--fontSize', '14px');
			}
		</script>

		<div class="box" style="--fontColor: pink" onclick="myClick()">点击更新css变量</div>
	</body>
</html>
